<template>
  <div class="detadetailsils">
    <p v-if='!dataStatus'>请先审核</p>
    <el-tabs v-if='dataStatus' type="border-card">
      <el-tab-pane label="基本信息">
        <el-form :label-position="labelPosition" label-width="100px">
          <el-form-item label="发行商">
            <p class="itemText">{{getpublisher()}}</p>
          </el-form-item>
          <el-form-item label="项目名称">
            <p class="itemText">{{getTitle(formLabelAlign)}}</p>
          </el-form-item>
          <el-form-item label="影视类型">
            <p class="itemText">{{getType()}}</p>
          </el-form-item>
          <el-form-item label="上映状态">
            <p class="itemText">{{getReleaseStatus(formLabelAlign)}}</p>
          </el-form-item>
          <el-form-item label="融资金额">
            <p
              class="itemText"
            >{{parseFloat(getShowDeciemal(formLabelAlign.totalOfMoney)).toLocaleString()}}元</p>
          </el-form-item>
          <el-form-item label="单份价格">
            <p class="itemText">{{getShowDeciemal(getPriceOfUnit(formLabelAlign))}}元/份</p>
          </el-form-item>
          <el-form-item label="融资进度">
            <p class="itemText">{{getStatus(formLabelAlign)}}</p>
          </el-form-item>
          <el-form-item label="达成率">
            <p class="itemText">{{getAchievement()}}%</p>
          </el-form-item>
          <el-form-item label="剩余金额">
            <p
              class="itemText"
            >{{parseFloat(getCopies(formLabelAlign)*getShowDeciemal(getPriceOfUnit(formLabelAlign))).toLocaleString()}}元</p>
          </el-form-item>
          <el-form-item label="剩余份数">
            <p class="itemText">{{getCopies(formLabelAlign)}}份</p>
          </el-form-item>
          <el-form-item label="限购数量">
            <p class="itemText">{{getuserLimit()}}</p>
          </el-form-item>
          <el-form-item label="线下定金">
            <p class="itemText">{{getOfficeDeposit(formLabelAlign)}}</p>
          </el-form-item>
          
          <el-form-item label="简介">
            <p class="itemText">{{getSubtitle(formLabelAlign)}}</p>
          </el-form-item>
          <el-form-item label="收益说明">
            <p class="itemText">{{getIncomeDetails(formLabelAlign)}}</p>
          </el-form-item>
          <el-form-item label="风险提示">
            <p class="itemText">{{getRiskWarning(formLabelAlign)}}</p>
          </el-form-item>
          <el-form-item class="cover" label="项目封面">
            <div>
              <img :src="getcoverImage()" alt>
            </div>
          </el-form-item>
          <el-form-item label="轮播图">
            <div class="rotationList">
              <div class='imgList' v-for="(item,index) in getcarousels(formLabelAlign)" :key="index">
                <img :src="item" alt>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="项目详情">
          <div class='content' v-html="getContent()"></div>
      </el-tab-pane>
      <el-tab-pane label="样本合同">
          <div class='content' v-html="getContractDetail()"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import { ajax } from "@/api";
import { parseTime } from "@/utils";
import numberFormat from "@/api/numberFormat";
import { getToken } from "@/utils/auth";
export default {
  name: "details",
  data() {
    return {
      dataStatus:true,
      disabled: true,
      labelPosition: "left",
      salesMoney: 0,
      formLabelAlign: {},
      params: {
        targetId: "",
        token: getToken()
      },
      users: []
    };
  },
  methods: {
    getContent(){
      if(JSON.stringify(this.formLabelAlign) == "{}"){
        return false;
      }
      return this.formLabelAlign.info.content;
    },
    getContractDetail(){
      if(JSON.stringify(this.formLabelAlign) == "{}"){
        return false;
      }
      return this.formLabelAlign.info.contractDetail;
    },
    getuserLimit(){
      if(JSON.stringify(this.formLabelAlign) == "{}"){
        return false;
      }
      return this.formLabelAlign.info.userLimit;
    },
    getcarousels(data){
      if(JSON.stringify(data) == "{}"){
        return false;
      }
      return data.info.carousels;
    },
    getSubtitle(data){
      if(JSON.stringify(data) == "{}"){
        return false;
      }
      if(data.checkInfo){
        return data.checkInfo.subtitle;
      }else{
        return data.info.subtitle;
      }
    },
    //项目详情
    getData() {
      this.params.targetId = this.$route.params.movieId;
      ajax("movieDetailForManager", this.params).then(res => {
        console.log(res);
        if (res.data.status) {
          console.log(res.data.data.checkInfo);
          if(res.data.data.checkInfo){
            this.dataStatus = false;
            this.formLabelAlign = {};
            return false;
          }
          
          this.salesMoney = res.data.salesOfMoney;
          this.formLabelAlign = res.data.data;
          this.users = res.data.user;
        }
      });
    },
    getShowDeciemal(money) {
      return numberFormat.showDecimal(money);
    },
    getOfficeDeposit(data){
      if(JSON.stringify(data) == "{}"){
          return false;
        }
      if(data.checkInfo){
        return numberFormat.showDecimal(data.checkInfo.deposit);
      }else{
        return numberFormat.showDecimal(data.info.deposit);
      }
    },
    getcoverImage(){
      if(JSON.stringify(this.formLabelAlign) == "{}"){
        return false;
      }
      return this.formLabelAlign.info.coverImage;
    },
    //融资进度
    getStatus(item) {
      if(JSON.stringify(item) == "{}"){
        return false;
      }
      if(item.info){
        if (item.info.statusChanges.length > 0) {
          return item.info.statusChanges[item.info.statusChanges.length - 1].after
            .text;
        }
      }else{
        return item.status.text;
      }
    },
    getTitle(data){

      if(data){
        if(JSON.stringify(data) == "{}"){
          return false;
        }
        if(data.checkInfo){
          return data.checkInfo.title;
        }else{
          return data.info.title;
        }
      }
    },
    //剩余份数
    getCopies(item) {
        if(JSON.stringify(item) == "{}"){
          return 0;
        }
        return (item.totalOfMoney - this.salesMoney) / item.info.priceOfUnit;
    },
    //单价
    getPriceOfUnit(item){
        if(JSON.stringify(item) == "{}"){
          return 0;
        }
        return item.info.priceOfUnit;
    },
    getIncomeDetails(item){
        if(JSON.stringify(item) == "{}"){
          return false;
        }
        return item.info.incomeDetail;
    },
    //影视类型
    getType() {
      if(JSON.stringify(this.formLabelAlign) == "{}"){
          return false;
        }
      return this.formLabelAlign.type.text;
    },
    //发行商名称
    getpublisher() {
      return this.users.name;
    },
    getReleaseStatus(item){
        if(JSON.stringify(item) == "{}"){
          return false;
        }
        return item.releaseStatus.text;
    },
    //达成率
    getAchievement() {
      return this.getShowDeciemal(
        this.salesMoney / this.formLabelAlign.totalOfMoney
      );
    },
    //风险提示
    getRiskWarning(item){
        if(JSON.stringify(item) == "{}"){
          return false;
        }
        return item.info.riskWarning;
    },
  },
  mounted() {
    this.getData();
  }
};
</script>


<style lang="less" scoped>
.details {
  padding: 1rem;
  .cover {
    div {
      width: 90px;
      height: 133px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .rotation {
    div {
     
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .itemText {
    margin: 0;
    border-bottom: 1px solid #cecece;
  }

  .rotationList {
    display: flex;
    flex-wrap: wrap;
    width: inherit;
    .imgList {
      margin: 0 .5rem .5rem 0;
        width: 321px;
        height: 182px;
        img {
          width: 100%;
          height: 100%;
        }
      p {
        text-align: center;
        color: red;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

 
}
</style>
